<template>
  <div class="main">
    <div class="main-com">
      <!-- 搜索框 -->
      <div class="search">
        <van-cell-group inset @click="toSearch">
          <van-field
            v-model="searchValue"
            center
            left-icon="scan"
            right-icon="photograph"
            clearable
            placeholder="商品/大家都在看/大家都在买"
          >
            <template #button>
              <van-button size="small">搜索</van-button>
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <!-- 顶部 -->
      <!-- <div class="top-info">
        <h1>XX官方旗舰店</h1>
        <van-button round class="attention-btn" size="small">已关注</van-button>
        <div class="synthesize">
          <van-button round type="danger" size="mini" class="tmall">天猫</van-button>
          <van-button round size="mini" class="synthesize-btn">综合体验<van-icon name="star" color="red" /><van-icon name="star" color="red" /><van-icon name="star" color="red" /><van-icon name="star" color="red" /><van-icon name="star" color="red" /></van-button>
          <h3>粉丝数413万</h3>
        </div>
      </div> -->
      <!-- 推荐商品 -->
      <div class="recommendShop">
        <div class="title">
          <h3>88会员节限时精选</h3>
          <span>查看全部></span>
        </div>
        <ul class="recommImg">
          <li v-for="item in hotShopList" :key="item.id" @click="checkShop(item)">
            <img :src="item.s_goods_photos[0].path" alt="">
            <h3>{{ item.name }}</h3>
            <span>￥</span>{{ item.price }}
          </li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div class="slide">
        <van-swipe class="my-swipe" :autoplay="3000" >
          <van-swipe-item v-for="item in swiperList" :key="item.id">
            <img :src="item.s_photos[0].path">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 热门商品 -->
      <div class="hotShop">
        <h1>热门商品</h1>
        <ul class="hotList">
          <li v-for="item in hotAllShopList" :key="item.id" @click="checkShop(item)">
            <img :src="item.s_goods_photos[0].path" alt="">
            <h3>{{ item.name }}</h3>
            <span>￥{{ item.price }}</span>
          </li>
        </ul>
      </div>
    </div>
    <van-back-top style="bottom: 16vw;" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {getAllSwiperApi,hotShopApi} from '@/server'
import { useRouter } from 'vue-router';
const router=useRouter()
// 搜索
const searchValue=ref()
// 轮播图
const swiperList=ref()
// 热门商品
const hotShopList=ref([])
const hotAllShopList=ref([])
// 轮播图
const getAllSwiperList=async ()=>{
  let res=await getAllSwiperApi({project_id:'1',site_id:'1'})
  localStorage.setItem('swiperList',JSON.stringify(res.data.result))
}
getAllSwiperList()
// 轮播图
swiperList.value=localStorage.getItem('swiperList')?JSON.parse(localStorage.getItem('swiperList')):[]
// 获取热门商品
const hotListSer=async ()=>{
  let res=await hotShopApi({project_id:'1'})
  localStorage.setItem('hotList',JSON.stringify(res.data.result.rows))
  hotShopList.value=res.data.result.rows.slice(0,3)
  hotAllShopList.value=res.data.result.rows
}
hotListSer()
// 获取热门商品
const hotList=JSON.parse(localStorage.getItem('hotList'))
hotShopList.value=hotList.slice(0,3)
hotAllShopList.value=hotList
// console.log(hotList);
// 查看商品
const checkShop=(item)=>{
  localStorage.setItem('good',JSON.stringify(item))
  router.push('/ProductInfo')
}
// 去搜索页面
const toSearch=()=>{
  router.push('/Search')
}
</script>

<style lang='scss'>
.main{
  width: 100vw;
  height: 266.6667vw;
  background-color: #f9f9f9;
  .main-com{
    padding-top: 2.6667vw;
    margin: 0 auto;
    width: 96vw;
    .search{
      background-color: #fff;
      .van-cell-group{
        margin: 0;
        .van-field__left-icon{
          color: black;
        }
        .van-field{
          background: #f4f4f8;
          padding: 1vw 1vw 1vw 2vw;
          .van-button{
            background-color: #f4f4f8;
            border: none;
          }
        }
      }
      
    }
    .recommendShop{
      margin-top: 2.6667vw;
      width: 96vw;
      height: 53.3333vw;
      border-radius: 2.6667vw;
      background-color: pink;
      .title{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-top: 2vw;
        margin: 0 auto 1vw;
        width: 93.3333vw;
        height: 8vw;
        box-sizing: border-box;
        color: #fff;
        background-color: pink;
        h3{
          font-size: 4.8vw;
          font-weight: bold;
        }
        span{
          font-size: 3.4667vw;
        }
      }
      .recommImg{
        display: flex;
        justify-content: space-around;
        height: 40vw;
        width: 96vw;
        li{
          width: 29.3333vw;
          height: 42vw;
          color: #fff;
          img{
            width: 29.3333vw;
            height: 29.3333vw;
            border-radius: 2.6667vw;
          }
          h3{
            margin: 1vw .5vw;
            height: 5.3333vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    // .top-info{
    //   position: relative;
    //   padding: 3vw;
    //   height: 17.3333vw;
    //   width: 96vw;
    //   background-color: #eff0f0;
    //   border-radius: 2vw;
    //   box-sizing: border-box;
    //   h1{
    //     height: 4.2667vw;
    //     font-size: 4.2667vw;
    //     font-weight: bold;
    //   }
    //   .attention-btn{
    //     position: absolute;
    //     top: 3vw;
    //     right: 4vw;
    //     background-color: #cbcbcb;
    //     color: #fff;
    //   }
    //   .synthesize{
    //     position: relative;
    //     margin-top: 1vw;
    //     height: 5.8667vw;
    //     .tmall{
    //       height: 4.2667vw;
    //       width: 10.6667vw;
    //       font-size: 3.2vw;
    //     }
    //     .synthesize-btn{
    //       margin-right: 1vw;
    //       height: 4.2667vw;
    //       width: 32vw;
    //       font-size: 3.2vw;
    //       color: #6d6d6d;
    //       background-color: #e7e7e6;
    //     }
    //     h3{
    //       position: absolute;
    //       bottom: 0;
    //       display: inline-block;
    //       width: 18.6667vw;
    //       height: 4.2667vw;
    //       font-size: 3.2vw;
    //       color: #6d6d6d;
    //       line-height: 4.2667vw;
    //     }
    //   }
    // }
    .slide{
      margin-top: 2.6667vw;
      .my-swipe {
        border-radius: 2.6667vw;
        .van-swipe-item {
          width: 96vw;
          height: 96vw;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .hotShop{
      h1{
        margin-top: 2.6667vw;
        height: 8vw;
        line-height: 8vw;
        font-size: 6.6667vw;
        font-weight: bold;
        text-align: center;
      }
      .hotList{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 96vw;
        // height: 266.6667vw;
        padding-bottom: 13.3333vw;
        box-sizing: border-box;
        li{
          margin-top: 1.3333vw;
          width: 42.6667vw;
          height: 56vw;
          background-color: #f2f2f2;
          border-radius: 2.6667vw;
          img{
            width: 42.6667vw;
            height: 42.6667vw;
            border-radius: 2.6667vw;
          }
          h3{
            height: 5.3333vw;
            line-height: 5.3333vw;
            font-size: 4.2667vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
          }
        }
      }
    }
  }
}
</style>
